
<xmp type="tag" name="scroll">
    <iframe height="0" frameborder="0" width="${resizekey}" style="position: absolute;" ></iframe>

    <scrollWrap id="${id}" class="${id}">
        <scroll>
            ${innerHTML}
        </scroll>
        <scrollBar>
            <scrollUp></scrollUp>
            <scrollBlock></scrollBlock>
            <scrollDown></scrollDown>
        </scrollBar>
    </scrollWrap>
    <script type="text/vm">
        function(vm){
            var innerHTMLChangeEventFirer = vm.queryElement({
                tagName:"IFRAME"
            })[0];
            innerHTMLChangeEventFirer.onload = function(){
                innerHTMLChangeEventFirer.contentWindow.onresize = _resizeScrollFramework;
            };
            var scrollWrapNode = vm.queryElement({
                tagName:"SCROLLWRAP"
            })[0];
            var scrollNode = vm.queryElement({
                tagName:"SCROLL"
            })[0];
            var scrollBarNode = vm.queryElement({
                tagName:"SCROLLBAR"
            })[0];
            var scrollUpNode = vm.queryElement({
                tagName:"SCROLLUP"
            })[0];
            var scrollBlockNode = vm.queryElement({
                tagName:"SCROLLBLOCK"
            })[0];
            var scrollDownNode = vm.queryElement({
                tagName:"SCROLLDOWN"
            })[0];
            /*
             * 初始化参数
             */
            var _animate_time = 0.35;
            var _cumulative = 0;
            var _scrollSpeed = 100;
            var _scrollStyle = scrollWrapNode.style
            var transformAble = _scrollStyle.hasOwnProperty("webkitTransform")|| _scrollStyle.hasOwnProperty("mosTransition")|| _scrollStyle.hasOwnProperty("oTransition")|| _scrollStyle.hasOwnProperty("transition");
            var $scrollWrapNode = $(scrollWrapNode);
            var $scrollNode = $(scrollNode);
            var $scrollBarNode = $(scrollBarNode);
            var $scrollUpNode = $(scrollUpNode);
            var $scrollBlockNode = $(scrollBlockNode);
            var $scrollDownNode = $(scrollDownNode);

            var _upHeight;
            var _downHeight;

            var _windowsHeight;
            var _defauleHeight;
            var _scrollHeight;
            var _blockHeight;//滚动块的高度
            function _initScrollFramework(){

                require(["jQuery","jQuery.mousewheel"],function ($) {

                    _upHeight = $scrollUpNode.height();
                    _downHeight = $scrollDownNode.height();

                    _windowsHeight = $scrollWrapNode.parent().height();
                    _defauleHeight = $scrollWrapNode.height();
                    _scrollHeight = _defauleHeight - _windowsHeight + 10;

                    $scrollWrapNode.height(_windowsHeight);
                    if (_windowsHeight/_defauleHeight>=1) {
                        $scrollBarNode.css("display","none");
                        _blockHeight = 0;
                    }else{
                        $scrollBarNode.css("display","");
                        $scrollBarNode.height(_windowsHeight);
                        _blockHeight = (_windowsHeight-_upHeight-_downHeight)*(_windowsHeight/_defauleHeight);
                        $scrollBlockNode.height(_blockHeight);
                        $scrollDownNode.css("top",_windowsHeight-_upHeight-_blockHeight-_downHeight);
                    }

                    $scrollBlockNode.addClass("animate");
                    if (transformAble) {
                        var _scrollAnimte = function(_px){
                            var _block_px = _blockHeight*(-_px/_windowsHeight)
                            $scrollNode.css({
                                transform:"translateY("+_px+"px)"
                            });
                            $scrollBlockNode.css({
                                transform:"translateY("+_block_px+"px)"
                            });
                        }
                    }else{
                        var _scrollAnimte = function(_px){
                            var _block_px = _blockHeight*(-_px/_windowsHeight)
                            $scrollNode.stop().animate({
                                marginTop:_px
                            },_animate_time);
                            $scrollBlockNode.stop().animate({
                                top:_block_px
                            },_animate_time);
                        }
                    }

                    function scrollEvent(event){
                        event||(event = _vmEvent);
                        event.preventDefault();
                        var _old_px = _scrollSpeed * _cumulative;
                        _cumulative+=event.deltaY;
                        var _px = _scrollSpeed * _cumulative;
                        if (_scrollHeight<-_px) {
                            _px = -_scrollHeight;
                            _cumulative = _px / _scrollSpeed;
                        }else if(_px>0){
                            _px = 0;
                            _cumulative = 0;
                        }
                        //边界停止
                        if (_old_px === _px) {
                            //边界动画
                            if (_is_by_scroll) {//如果使用滚动条滚动，则取消越界动画
                                return
                            }
                            if (_px === 0) {
                                _scrollAnimte(100);
                                setTimeout(function(){
                                    _scrollAnimte(0);
                                },_animate_time*1000);
                            }else if(_px === -_scrollHeight){
                                _scrollAnimte(-_scrollHeight-100);
                                setTimeout(function(){
                                    _scrollAnimte(-_scrollHeight);
                                },_animate_time*1000);
                            }
                            return;
                        }
                        _scrollAnimte(_px/*, _blockHeight*(-_px/_windowsHeight)*/);
                    }
                    //绑定事件
                    $scrollWrapNode.on("mousewheel",scrollEvent);

                    var _vmEvent =  {
                        preventDefault:function(){},
                        deltaY:0
                    };
                    $scrollUpNode.on("click",function(e){
                        _vmEvent.deltaY = 1;
                        scrollEvent(_vmEvent);
                    });
                    $scrollDownNode.on("click",function(e){
                        _vmEvent.deltaY = -1;
                        scrollEvent(_vmEvent);
                    });

                    var $window = $(window);
                    var _cacheY;
                    var _move_ti;
                    function _moveWheel(event){
                        event.preventDefault();
                        var _currentY = event.clientY;
                        var _disH = _cacheY - _currentY;
                        if (!_disH) {
                            return
                        }
                        _cacheY = _currentY;
                        _vmEvent.deltaY = (_disH/_blockHeight)*_windowsHeight/_scrollSpeed;
                        scrollEvent(_vmEvent);
                    }
                    var _is_by_scroll = false;//是否滚动条事件在滚动，如果是需要取消滚动越界动画
                    //滚动条点击移动事件
                    $scrollBlockNode.on("mousedown",function(event){
                        _cacheY = event.clientY;
                        _is_by_scroll = true;
                        //中断css3平缓
                        $scrollBlockNode.removeClass("animate");
                        $scrollNode.css("transition","none");
                        $window.on("mousemove",_moveWheel).on("mouseup",function _upmouse(){
                            $window.off("mousemove",_moveWheel).off("mouseup",_upmouse);
                            //继续CSS3平缓动画
                            $scrollBlockNode.addClass("animate");
                            $scrollNode.css("transition","");
                            _is_by_scroll = false;
                        });
                    });
                    //over!!
                });
            };
            _initScrollFramework();

            function _resizeScrollFramework(){
                require(["jQuery","jQuery.mousewheel"],function ($) {
                    $scrollWrapNode.height("auto");
                    _windowsHeight = $scrollWrapNode.parent().height();
                    _defauleHeight = $scrollWrapNode.height();
                    _scrollHeight = _defauleHeight - _windowsHeight + 10;

                    $scrollWrapNode.height(_windowsHeight);
                    if (_windowsHeight/_defauleHeight>=1) {
                        $scrollBarNode.css("display","none");
                        _blockHeight = 0;
                    }else{
                        $scrollBarNode.css("display","");
                        $scrollBarNode.height(_windowsHeight);
                        _blockHeight = (_windowsHeight-_upHeight-_downHeight)*(_windowsHeight/_defauleHeight);
                        $scrollBlockNode.height(_blockHeight);
                        $scrollDownNode.css("top",_windowsHeight-_upHeight-_blockHeight-_downHeight);
                    }
                });
            }
        }
    </script>
</xmp>

<xmp type="tag" name="inputnumber">
    <inputNumber>
        <numberCut event-click="{{'$Private.Event.cutNumber'}}">-</numberCut>
        <input bind-input="${bind-input}" value="${value}" event-input="{{'$Private.Event.formatNumber'}}" type="text" event-change="${onchange}" name="num" max="${max}" min="${min}" loop="${loop}" />
        <numberAdd event-click="{{'$Private.Event.addNumber'}}">+</numberAdd>
    </inputNumber>
    <script type="text/vm">
    function(vm){
        var inputNode=vm.queryElement({
            tagName:"INPUT"
        })[0];
        var numberAddNode = vm.queryElement({
            tagName:"NUMBERADD"
        })[0];
        var numberCutNode = vm.queryElement({
            tagName:"NUMBERCUT"
        })[0];
        function _get_value(num){
            return parseFloat(num)||0;
        };
        //动态获取最大最小值，省去绑定
        function _get_max(){
            var max = inputNode.getAttribute("max");
            if(max===""){
                max = Infinity;
            }else{
                max = _get_value(max);
            }
            return max;
        }
        function _get_min(){
            var min = inputNode.getAttribute("min");
            if(min===""){
                min = -Infinity;
            }else{
                min = _get_value(min);
            }
            return min;
        }
        function _get_loop(){
            var loop = inputNode.getAttribute("loop");
            if(loop===""){
                loop = 1;
            }else{
                loop = _get_value(loop)||1;
            }
            return loop;
        }
        var old_value = "";
        function _format_value () {
            var value = inputNode.value;
            var number_value = parseFloat(value);
            if (number_value!=value) {
                if (!number_value) {//NaN||0
                    inputNode.value = 0;
                }else{
                    inputNode.value = number_value;
                }
            }
            var max = _get_max();
            var min = _get_min();
            if (inputNode.value>max) {
                inputNode.value = max
                numberAddNode.className = "disable"
                numberCutNode.className = ""
            }else if(inputNode.value<min){
                inputNode.value = min
                numberCutNode.className = "disable"
                numberAddNode.className = ""
            }else if(max == min){
                numberCutNode.className = "disable"
                numberAddNode.className = "disable"
            }else{
                numberAddNode.className = ""
                numberCutNode.className = ""
            }
            if(old_value != inputNode.value){
                old_value = inputNode.value
                jSouper.dispatchEvent(inputNode,"change");
            }
        };

        function _moni_input() {
            if (inputNode.dispatchEvent) {
                jSouper.dispatchEvent(inputNode,"input");
            }else{
                jSouper.dispatchEvent(inputNode,"keyup");
            }
        }
        vm.set("$Private.Event.formatNumber",_format_value);
        vm.set("$Private.Event.cutNumber",function(e){
            var loop = _get_loop();
            inputNode.value = _get_value(inputNode.value)-loop;
            //先格式化完成数据再触发，keyup是为了触发不支持input event的浏览器
            _format_value();
            _moni_input();
        });
        vm.set("$Private.Event.addNumber",function(e){
            var loop = _get_loop();
            inputNode.value = _get_value(inputNode.value)+loop;
            _format_value();
            _moni_input();
        });
        //初始的时候对数值进行一次格式化
        setTimeout(function () {
            _format_value();
            _moni_input();
        });
    }
    </script>
</xmp>